<template>

	<div class="personinformation" shadow="never">
		<!--个人信息索引-->
		<div class="personinfo_tro">
			个人信息
			<div class="hr"></div>
		</div>
		
		
		<!--个人信息框框-->
		<div class="personinfo_change">
			<div class="personinfo_change_form">
				
			<el-form ref="form" :model="form" label-width="120px" label-position="left"size="medium" >
				<el-form-item label="昵称" >
					<el-input v-model="form.user_nickname" style="width:150px"></el-input>
				</el-form-item>
				<el-form-item label="用户名">
					<el-input v-model="form.user_name" style="width:150px"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="form.user_password" style="width:150px" show-password></el-input>
				</el-form-item>
				<el-form-item label="真实姓名">
					<el-input v-model="form.user_true_name" style="width:150px"></el-input>
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="form.telephone" style="width:200px"></el-input>
				</el-form-item>
				<el-form-item label="生日">
						<el-date-picker 
						type="date" 
						placeholder="选择日期" 
						v-model="form.birthday"
						value-format="yyyy-MM-dd"
						style="width: 300px;"></el-date-picker>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="form.sex">
						<el-radio label="男"></el-radio>
						<el-radio label="女"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="头像">
					<el-col :span="12">
						<div class="demo-basic--circle">
							<div class="block">
								<el-upload ref="editImgUpload" action="" list-type="picture-card" :limit="1" :class="{hide:editImgHideUpload}" :on-change="editImgChangeImg"
								           :on-remove="editImgHandleRemove" :auto-upload="false" :file-list="editImgFileList" :multiple="false">
									<img :src="`http://localhost:8080/res/${form.head_img}`" height="146px" width="146px" style="opacity:0.5;"/>
								</el-upload>
							</div>
						</div>
					</el-col>
				</el-form-item>
				<!--<el-form-item label="个人照片">
					<el-col :span="12">
						<div class="demo-basic&#45;&#45;circle">
							<div class="block">
								<el-upload ref="editPicUpload" action="" list-type="picture-card" :limit="1" :class="{hide:editPicHideUpload}" :on-change="editPicChangeImg"
								           :on-remove="editPicHandleRemove" :auto-upload="false" :file-list="editPicFileList" :multiple="false">
									<img :src="`http://localhost:8080/res/${form.user_picture}`" height="146px" width="146px" style="opacity:0.5;"/>
								</el-upload>
							</div>
						</div>
					</el-col>
				</el-form-item>-->
				<el-form-item>
					<el-button type="primary" @click="onSubmit">保存</el-button>
				</el-form-item>
			</el-form>
			</div>
		</div>
		
	</div>
</template>

<script>
	import PersonalService from "../PersonalService";
	import PersonInformationService from "./PersonInformationService";
	import Tools from "../../../tools/tools.js";
	import bus from '@/Bus.js';
	export default {
		data() {
			return {
				form: {},
				squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
				sizeList: "large",
        editImgFileList:[],
        editPicFileList:[],
        editImgHideUpload:false,
        editPicHideUpload:false,
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
/*
        this.editPicFileList = this.$refs.editPicUpload.uploadFiles;
*/
        this.editImgFileList = this.$refs.editImgUpload.uploadFiles;
		
/*
        this.form.birthday=Tools.dateFtt("yyyy-MM-dd",this.form.birthday);
*/
        this.form.birthday=this.form.birthday.toString().substring(0,10);
        this.upload(this.editImgFileList, res2 => {
          if(res2!=''){
            this.form.head_img = res2;
          }
          PersonInformationService.editUserService(
            this.form
            , r => {
              if (r) {
                this.$message({
                  type: 'success',
                  message: '提交成功!'
                });
				bus.$emit("refresh");
              } else {
                this.$message({
                  type: 'error',
                  message: '提交失败!'
                });
              }
              this.getLogin();
            });
        })


			},
      //以下有关图片样式
      editImgChangeImg(file,fileList){
        this.editImgHideUpload = fileList.length >= 1;
      },
      editImgHandleRemove(file,fileList){
        this.editImgHideUpload = fileList.length >= 1;
      },
      editPicChangeImg(file,fileList){
        this.editPicHideUpload = fileList.length >= 1;
      },
      editPicHandleRemove(file,fileList){
        this.editPicHideUpload = fileList.length >= 1;
      },
      //上传图片
      upload(fileList,callback){
        let formData = new FormData();
        let result = fileList.map(obj => {
          return obj.raw
        });
        result.forEach(function(file) {
          formData.append('mpfs', file, file.name);
        })
        if(formData.has('mpfs')){
          PersonInformationService.uploadService(formData, r => {
            //console.log(r.picName);
            callback(r.picName);
          });
        }else{
          callback('');
        }
      },
			getLogin(){
        PersonalService.getLoginService({

        },r=>{
          console.log(r);
          this.form=r.loginUser;

        })
			}
		},
		created() {
      this.getLogin();
    }
  }
</script>

<style lang="less">
	.personinformation{
		width: 100%;
		height:100%;
		margin:20px;
		display: flex;
		flex-direction: column;
		//个人信息更改介绍
		.personinfo_tro{
			
			// margin-top: 20px;
			// margin-left: 10px;
			// margin-right: 60px;
			
			//background-color: lightblue;
			font-family: "Helvetica Neue";
			font-size: 26px;
			line-height: 28px;
			color: #606266; //字体颜色
			letter-spacing: 1px;
		}
		//个人信息更改表单
		.personinfo_change{
			padding-top: 10px;
			padding-bottom: 30px;
			padding-left: 10px;
			//background-color: lightsalmon;
			.personinfo_change_form{
				width: 80%;
				//margin-top: 20px;
				//margin-left: 40px;
			}
			
		}
		.hr {
			border-bottom: 1px solid #f5a8a8;
			height: 0px;
			margin-top: 10px;
		}
		.hide .el-upload--picture-card {
			display: none;
		}
	}
</style>
